<template>
  <div class="user-info">
    <div class="user-info-header">
      <h2>报名人信息展示</h2>
      <el-input
        v-model="searchInfo"
        size="large"
        placeholder="请输入学生学号搜索信息"
        class="input-with-select search-info"
      >
        <template #append>
          <el-button :icon="Search" v-debounce="{ fn: selectStu }" />
        </template>
      </el-input>
    </div>
    <div class="user-info-content">
      <ApplicantInfoCard v-model:applyInfo="applyInfoData"></ApplicantInfoCard>
    </div>
    <div class="user-info-bottom">
      <div class="user-info-bottom-contaniner">
        <el-pagination
          v-model:currentPage="currentPage4"
          :page-size="1"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, prev, pager, next, jumper"
          :total="parseInt(total)"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import ApplicantInfoCard from '@/components/ApplicantInfoCard.vue';
import { Search } from '@element-plus/icons-vue'
import GetInfo from '@/api/GetInfo';

let applyInfoData = reactive({
  id: '',
  name: '',
  sex: '',
  studentNumber: '',
  college: '',
  phone: '',
  email: '',
  selection: '',
  introduction: '',//自我介绍
  applyStatus: '',
  reason: '',
})
let userData: any = [];
const departmentId = sessionStorage.getItem('depId');
if (departmentId) {
  GetInfo.selectApplyUser(parseInt(departmentId)).then(response => {
    total.value = response.length;
    userData = response;
    Object.keys(response[currentPage4.value - 1]).forEach(key => {
      applyInfoData[key] = response[currentPage4.value - 1][key];
    })
  })
}

if (!departmentId) {
  GetInfo.selectApplyUser().then(response => {
    total.value = response.length;
    userData = response;
    Object.keys(response[currentPage4.value - 1]).forEach(key => {
      applyInfoData[key] = response[currentPage4.value - 1][key];
    })
  })
}

//搜索框
let searchInfo = ref('');
const selectStu = () => {
  GetInfo.selectApplyByStuNum(searchInfo.value).then(response => {

    if (response === null) {
      console.log('err');
      return
    }
    searchInfo.value = '';
    total.value = response.length;
    userData = response;
    Object.keys(response[currentPage4.value - 1]).forEach(key => {
      applyInfoData[key] = response[currentPage4.value - 1][key];
    })
  })
    .catch(err => {
      console.log(err);
    })
}

//分页
const total = ref('');

const currentPage4 = ref(1);
const handleCurrentChange = () => {
  Object.keys(userData[currentPage4.value - 1]).forEach(key => {
    applyInfoData[key] = userData[currentPage4.value - 1][key];
  })
}
</script>

<style scoped lang="scss">
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
    "t-grey": #8a8888,
  //字体常用颜色--灰
    "t-white": #f5f5f5,
  //字体常用颜色--白
    "border": #707070 //边框颜色
);
//报名人信息展示
.user-info {
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  .user-info-header {
    h2 {
      font-size: 2.8125rem;
      text-align: center;
      color: map-get($map: $colors, $key: t-grey);
    }
    .search-info {
      position: absolute;
      width: 25%;
      right: 5.625rem;
      top: 1.5625rem;
      font-size: 1.125rem;
    }
  }
  .user-info-bottom {
    position: relative;
    top: 0;
    left: 0;
    height: 100px;
    .user-info-bottom-contaniner {
      position: absolute;
      right: 100px;
      bottom: 2rem;
    }
  }
}
</style>